<html>
<title>流程图</title>
<style>
div { text-align:center; }
canvas { border:1px solid gray; }
</style>
<body>
<div>
<canvas id="canvas" width="800" height="800"></canvas>
</div>
<script>
var canvas = document.getElementById('canvas');
cw = canvas.width;
var ctx = canvas.getContext('2d');
ctx.font="15px Georgia";
y = 50;
rw = 180;
rh = 50;

ctx.rect((cw-rw)/2, y, rw, rh);
text = '连接服务器';
tw = ctx.measureText(text).width;
tx =  (cw-rw)/2 + (rw-tw)/2;
ctx.fillText(text, tx, y + 20);
text = 'getChatClient';
tw = ctx.measureText(text).width;
tx =  (cw-rw)/2 + (rw-tw)/2;
ctx.fillText(text, tx, y + 40);

//↓
ctx.moveTo(cw/2, y + rh);
ctx.lineTo(cw/2, y + 2*rh);
ctx.lineTo(cw/2 - 5, y + 2*rh - 10);
ctx.moveTo(cw/2, y + 2*rh);
ctx.lineTo(cw/2 + 5, y + 2*rh - 10);

y += 100;
ctx.rect((cw-rw)/2, y, rw, rh);
text = '登录';
tw = ctx.measureText(text).width;
tx =  (cw-rw)/2 + (rw-tw)/2;
ctx.fillText(text, tx, y + 20);
text = 'chatClient.login';
tw = ctx.measureText(text).width;
tx =  (cw-rw)/2 + (rw-tw)/2;
ctx.fillText(text, tx, y + 40);

//←
ctx.moveTo(cw/2 - rw/2, y + rh/2);
ctx.lineTo(cw/2 - rw, y + rh/2);
ctx.lineTo(cw/2 - rw + 10, y + rh/2 - 5);
ctx.moveTo(cw/2 - rw , y + rh/2);
ctx.lineTo(cw/2 - rw + 10, y + rh/2 + 5);

ctx.rect(cw/2-2*rw, y, rw, rh);
text = '修改签名';
tw = ctx.measureText(text).width;
tx = cw/2 - 2*rw + (rw-tw)/2;
ctx.fillText(text, tx, y + 20);
text = 'chatClient.updateDesc';
tw = ctx.measureText(text).width;
tx = cw/2 - 2*rw + (rw-tw)/2;
ctx.fillText(text, tx, y + 40);

//→
ctx.moveTo(cw/2 + rw/2, y + rh/2);
ctx.lineTo(cw/2 + rw, y + rh/2);
ctx.lineTo(cw/2 + rw - 10, y + rh/2 - 5);
ctx.moveTo(cw/2 + rw , y + rh/2);
ctx.lineTo(cw/2 + rw - 10, y + rh/2 + 5);

ctx.rect(cw/2 + rw, y, rw, rh);
text = '修改密码';
tw = ctx.measureText(text).width;
tx =  cw/2 + rw + (rw-tw)/2;
ctx.fillText(text, tx, y + 20);
text = 'client.newPasswd';
tw = ctx.measureText(text).width;
tx =  cw/2 + rw + (rw-tw)/2;
ctx.fillText(text, tx, y + 40);

//↑
ctx.moveTo(cw/2 + 1.5*rw, y);
ctx.lineTo(cw/2 + 1.5*rw, y - rh);
ctx.moveTo(cw/2 + 1.5*rw, y - rh);
ctx.lineTo(cw/2 + 1.5*rw - 5, y - rh + 10);
ctx.moveTo(cw/2 + 1.5*rw, y - rh);
ctx.lineTo(cw/2 + 1.5*rw + 5, y - rh + 10);

ctx.rect(cw/2 + rw, y-100, rw, rh);
text = '校验密码';
tw = ctx.measureText(text).width;
tx = cw/2 + rw + (rw-tw)/2;
ctx.fillText(text, tx, y - 100 + 20);
text = 'client.CheckPwd';
tw = ctx.measureText(text).width;
tx = cw/2 + rw + (rw-tw)/2;
ctx.fillText(text, tx, y - 100 + 40);

//↓
ctx.moveTo(cw/2, y + rh);
ctx.lineTo(cw/2, y + 2*rh);
ctx.lineTo(cw/2 - 5, y + 2*rh - 10);
ctx.moveTo(cw/2, y + 2*rh);
ctx.lineTo(cw/2 + 5, y + 2*rh - 10);

y += 100;
ctx.rect((cw-rw)/2, y , rw, rh);
text = '获取好友';
tw = ctx.measureText(text).width;
tx =  (cw-rw)/2 + (rw-tw)/2;
ctx.fillText(text, tx, y + 20);
text = 'chatClient.getFriends';
tw = ctx.measureText(text).width;
tx =  (cw-rw)/2 + (rw-tw)/2;
ctx.fillText(text, tx, y + 40);

//→
ctx.moveTo(cw/2 + rw/2, y + rh/2);
ctx.lineTo(cw/2 + rw, y + rh/2);
ctx.lineTo(cw/2 + rw - 10, y + rh/2 - 5);
ctx.moveTo(cw/2 + rw , y + rh/2);
ctx.lineTo(cw/2 + rw - 10, y + rh/2 + 5);

ctx.rect(cw/2 + rw, y, rw, rh);
text = '删除联系人';
tw = ctx.measureText(text).width;
tx =  cw/2 + rw + (rw-tw)/2;
ctx.fillText(text, tx, y + 20);
text = 'chatClient.removeFriend';
tw = ctx.measureText(text).width;
tx =  cw/2 + rw + (rw-tw)/2;
ctx.fillText(text, tx, y + 40);

//←
ctx.moveTo(cw/2 - rw/2, y + rh/2);
ctx.lineTo(cw/2 - rw, y + rh/2);
ctx.lineTo(cw/2 - rw + 10, y + rh/2 - 5);
ctx.moveTo(cw/2 - rw , y + rh/2);
ctx.lineTo(cw/2 - rw + 10, y + rh/2 + 5);

ctx.rect(cw/2-2*rw, y, rw, rh);
text = '搜索联系人';
tw = ctx.measureText(text).width;
tx = cw/2 - 2*rw + (rw-tw)/2;
ctx.fillText(text, tx, y + 20);
text = 'chatClient.searchPerson';
tw = ctx.measureText(text).width;
tx = cw/2 - 2*rw + (rw-tw)/2;
ctx.fillText(text, tx, y + 40);

//↓
ctx.moveTo(cw/2 - 1.5*rw, y + rh);
ctx.lineTo(cw/2 - 1.5*rw, y + 2*rh);
ctx.lineTo(cw/2 - 1.5*rw - 5, y + 2*rh - 10);
ctx.moveTo(cw/2 - 1.5*rw, y + 2*rh);
ctx.lineTo(cw/2 - 1.5*rw + 5, y + 2*rh - 10);

ctx.rect(cw/2 - 2*rw, y+100, rw, rh);
text = '添加联系人';
tw = ctx.measureText(text).width;
tx =  cw/2 - 2*rw + (rw-tw)/2;
ctx.fillText(text, tx, y + 100 + 20);
text = 'chatClient.addFriend';
tw = ctx.measureText(text).width;
tx = cw/2 - 2*rw + (rw-tw)/2;
ctx.fillText(text, tx, y + 100 + 40);

//↓
ctx.moveTo(cw/2, y + rh);
ctx.lineTo(cw/2, y + 2*rh);
ctx.lineTo(cw/2 - 5, y + 2*rh - 10);
ctx.moveTo(cw/2, y + 2*rh);
ctx.lineTo(cw/2 + 5, y + 2*rh - 10);

y += 100;
ctx.rect((cw-rw)/2, y, rw, rh);
text = '发送登录消息';
tw = ctx.measureText(text).width;
tx =  (cw-rw)/2 + (rw-tw)/2;
ctx.fillText(text, tx, y + 20);
text = 'chatClient.tellAll';
tw = ctx.measureText(text).width;
tx =  (cw-rw)/2 + (rw-tw)/2;
ctx.fillText(text, tx, y + 40);

//↓
ctx.moveTo(cw/2, y + rh);
ctx.lineTo(cw/2, y + 2*rh);
ctx.lineTo(cw/2 - 5, y + 2*rh - 10);
ctx.moveTo(cw/2, y + 2*rh);
ctx.lineTo(cw/2 + 5, y + 2*rh - 10);

y += 100;
ctx.rect(cw/2 - rw/2, y, rw, rh);
text = '获取消息';
tw = ctx.measureText(text).width;
tx = cw/2 - rw/2 + (rw-tw)/2;
ctx.fillText(text, tx, y + 20);
text = 'chatClient.getMsg';
tw = ctx.measureText(text).width;
tx = cw/2 - rw/2 + (rw-tw)/2;
ctx.fillText(text, tx, y + 40);

//↑
ctx.moveTo(cw/2, y + rh);
ctx.lineTo(cw/2 - 5, y + rh + 10);
ctx.moveTo(cw/2, y + rh);
ctx.lineTo(cw/2 + 5, y + rh + 10);
ctx.moveTo(cw/2, y + rh);
ctx.lineTo(cw/2, y + 2*rh);

y += 100;
ctx.rect(cw/2 - rw/2, y, rw, rh);
text = '发送消息';
tw = ctx.measureText(text).width;
tx = cw/2 - rw/2 + (rw-tw)/2;
ctx.fillText(text, tx, y + 20);
text = 'chatClient.chatTo';
tw = ctx.measureText(text).width;
tx = cw/2 - rw/2 + (rw-tw)/2;
ctx.fillText(text, tx, y + 40);

ctx.stroke();
</script>
</body>
</html>
